<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-title">场所码名称：</span>
          <el-input size="small" placeholder="场所码名称"
                    class="search-item" v-model="searchObj.csName"/>
        </div>
        <div class="filter-item">
          <span class="filter-title">场所码编码：</span>
          <el-input size="small" placeholder="场所码编码"
                    class="search-item" v-model="searchObj.csId"/>
        </div>
        <div class="filter-item">
          <span class="filter-title">机构名称：</span>
          <el-input size="small" placeholder="机构名称"
                    class="search-item" v-model="searchObj.orgName"/>
        </div>
      </div>
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-title">社会信用代码：</span>
          <el-input size="small" placeholder="社会信用代码"
                    class="search-item" v-model="searchObj.unifiedCode"/>
        </div>
        <div class="filter-item">
          <el-button size="small" @click="search" class="filter-item" type="primary">
            查询
          </el-button>
          <el-button size="small" @click="reset" class="filter-item">
            重置
          </el-button>
        </div>
      </div>
    </div>
    <el-table
      size="medium"
      :data="tabItems"
      ref="table"
      style="width: 100%;"
      v-loading="tabLoading"
    >
      <el-table-column label="场所码编码" align="center"
        prop="csId"
      />
      <el-table-column label="场所码名称" align="left"
        prop="csName"
      />
      <el-table-column label="机构名称" align="left"
        prop="orgName"
      />
      <el-table-column label="社会信用代码" align="center"
        prop="unifiedCode"
      />
      <el-table-column label="申请时间" align="center"
        prop="createTime"
      />
      <el-table-column label="最后操作时间" align="center"
        prop="updateHistoryTime"
      />
      <el-table-column label="操作类型" align="center"
        prop="optionType"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.optionType == 0">修改</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center"
        prop="echoMap.updateHistoryBy"
      />
      <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="itemDetail(scope.row)">详情</el-button>
          <!-- <el-button
            size="mini"
            type="text"
            @click="itemDetail(scope.row)">核验/审计</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box">
      <el-pagination
        :background="true"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-count="pagination.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <CSMHistoryDetail
      ref="detail"
      :dialog-visible="detailDialog.isVisible"
      @close="detailClose"
    />
  </div>
</template>

<script>
import CSMHistoryDetail from '@/components/csmCom/csmHistory/CSMHistoryDetail.vue';
import {exportCsInfo, selectCsInfoHistoryPage} from '@/http/apiUrls.js';
export default {
  name: 'CSMHistory',
  components:{ CSMHistoryDetail },
  data() {
    return {
      // 详情框
      detailDialog: {
        isVisible: false,
      },
      tabLoading: false,
      exportLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [],
      searchObj: this.initSearchObj(),
    }
  },
  created(){
    this.getData(1, this.pageItems, {}, {})
  },
  methods: {
    initSearchObj(){
      return {
        csName: '',
        csId: '',
        orgName: '',
        unifiedCode: ''
      }
    },
    getSearchObj(){
      let obj = {...this.searchObj};
      return obj;
    },
    getExtraObj(){
      let obj = this.searchObj;
      let extra = {};
      return extra
    },
    search(){
      this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    reset(){
      this.searchObj = this.initSearchObj()
      this.getData(1, this.pageItems, {}, {})
    },
    getData(current , size, model, extra){
      let requestData = {
        current,
        size,
        model,
        extra
      }
      this.tabLoading = true;
      this.$postJson(selectCsInfoHistoryPage, requestData).then(res => {
        this.tabLoading = false;
        if(res){
          const pagination = {
            currentPage: parseInt(res.current), // 当前页面号
            pageSize: parseInt(res.size), // 每页条目数
            pageCount: parseInt(res.pages), // 总页面数
          }
          this.pagination = pagination;
          this.tabItems = res.records;
        }
      })
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    itemDetail(item){
      this.$refs.detail.setDetailObj(item.csId)
      this.detailDialog = {
        isVisible: true,
      };
    },
    exportExcel() {
      let requestData = {
        model: this.getSearchObj()
      }
      // this.exportLoading = true
      // this.$exportJson(exportCsInfo, requestData).then(res => {
      //   this.exportLoading = false
      //   if(res){
      //     console.log(res);
      //     var b = new Blob([res], { type: "application/vnd.ms-excel" });
      //     // 根据传入的参数b创建一个指向该参数对象的URL
      //     var url = URL.createObjectURL(b);
      //     var link = document.createElement("a");
      //     // 导出的文件名
        
      //     let fileName = "场所码列表.xlsx";
      //     link.download = fileName;
      //     link.href = url;
      //     link.click();
      //   }
      // })
    },
    detailClose(){
      this.detailDialog.isVisible = false;
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .filter-row {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    .filter-item {
      width: fit-content;
      .filter-title {
        display:inline-block;
        width:100px;
        text-align:right;
        margin-left: 4px;
      }
    }
  }
}
</style>